<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .step {
    display: flex;
    align-items: center;
    /* 完成组件的缩放 */
    zoom: 0.5;
  }

  .num {
    border: 1px solid #999;
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    align-items: center;

  }

  .num_input {
    border: 0;
    outline: none;
    width: 100px;
    height: 40px;
    font-size: 30px;
  }

  .btn {
    border: 1px solid #999;
    background-color: #fff;
    margin: 0 10px;
    padding: 10px 20px;
    font-size: 30px;
  }

  /* 清除 IE 浏览器下输入框默认按钮 */
  ::-ms-clear {
    display: none;
  }

  /* 商品 */
  .shopbox {
    width: 500px;
    border: 1px solid #ccc;
    display: flex;
    margin: 3px 0;
  }

  .shop_left {
    width: 25%;
    margin: 10px;
  }

  .image_box {
    width: 100%;
  }

  .shop_right {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 80%;
  }

  .explain_box {
    display: flex;
    justify-content: space-between;
  }

  .explain_top {
    font-size: 24px;
    font-weight: bolder;
  }

  .explain_text {
    font-size: 12rpx;
    font-weight: bolder;
    color: #999;
  }
</style>

<body>
  <div id="app"></div>
  <div id="mark"></div>
</body>
<!-- 引入 js 文件 -->
<!-- React 核心的交互代码 -->
<script src="./node_modules//react/umd/react.development.js"></script>
<!-- React dom 渲染的核心代码 -->
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 导入 Babel 插件，作用是将高版本的 JSX 语法进行低版本兼容 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">
  // 创建一个步进器组件
class StepNum extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      num:props.num ? props.num:1
    }
    this.clicKAction = this.clicKAction.bind(this);
    this.changeAction = this.changeAction.bind(this);
  }
  // 定义点击事件操做
  clicKAction(event){
    let txt = event.target.innerText;
    let countNum = 0;
    if(txt == "+"){
        countNum = this.state.num + 1 < this.props.totleNum ? (this.state.num + 1):this.props.totleNum
    }else{
        countNum = this.state.num- 1 > 0 ? (this.state.num -1):0
    }
    // 修改当前数量
    this.setState(state=>{
      return {
        num:countNum
      }
    });
    // 将数据同步给父级组件
    this.props.changeTotal(countNum)
  }
  changeAction(event){
    // 修改 state
    let val = event.target.value;
    // 验证数据是否合法
    if(/^[1-9]?\d*$/.test(val)){
      let countNum = val < this.props.totleNum ? Number(val):this.props.totleNum
      this.setState(state=>{
        return {
          num:countNum
        }
      });
    }
  }
  render(){


    // 返回当前组件对应的 DOM 结构
    return (
      <div class="step">
        <button class="btn" onClick={this.clicKAction}>-</button>
        <div class="num">
          <input type="text" class="num_input" value={this.state.num} onChange={this.changeAction} />
        </div>
        <button class="btn" onClick={this.clicKAction}>+</button>
      </div>
    )
  }
}


// 创建一个步进器组件
class ShopBox extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      totlePrice:this.props.item.num * this.props.item.price
    };
    // 将该函数的调用权限绑定给 shop 组件
    this.changeTotalPrice = this.changeTotalPrice.bind(this);
  }

  // 更改总价格
  changeTotalPrice(num){
    console.log(num)
    this.setState((state,props)=>{
      return{
        totlePrice: num * props.item.price
      }
    });
  }

  render(){
    // 返回当前组件对应的 DOM 结构
    return (
      <div class="shopbox">
        <div class="shop_left">
          <img class="image_box" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F18%2F08%2F24%2F05dbcc82c8d3bd356e57436be0922357.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635306702&t=50e9739b9bcd4a1b2634a77a641f8f40" alt="" />
        </div>
        <div class="shop_right">
          <div class="explain_top">{this.props.item.name}</div>
          <div class="explain_text">{this.props.item.explain}</div>
          <StepNum {...this.props.item} changeTotal={this.changeTotalPrice} />
          <div class="explain_box">
            <span>售价：￥{this.props.item.price}元</span>
            <span>总价：￥{this.state.totlePrice}元</span>
          </div>
        </div>
      </div>
    )
  }
}

// 定义数据源
let items = [
  {name:"网红大喇叭",price:224,num:1,totleNum:30,explain:"要多响有多响"},
  {name:"迷你小西瓜",price:94,num:1,totleNum:30,explain:"沕沕沕沕沕沕沕沕沕沕沕撒旦2113221321321"},
  {name:"ipnone 99 Pro",price:999998,num:1,totleNum:12,explain:"顺德区强大的发的发发放发"},
  {name:"诺基亚1110",price:199,num:1,totleNum:30,explain:"的我发的萨芬委屈饿方法的份未发"},
  {name:'蓝鸥牌大月饼',price:5000,explain:"真好吃呀！妈妈再也不用担心我的学习啦",num:2,totleNum:100}
]

ReactDOM.render((
  // <div>
  //   {items.map((item,index)=>{
  //     return <ShopBox item={item}/>
  //   })}
  // </div>
  <div>
      {items.map((item,index)=><ShopBox item={item} key={index}/>)}
  </div>
),document.querySelector('#mark'))
</script>

</html>